<template>
  <view
    class="tn-number-keyboard"
  >
    <!-- 数值区域 -->
    <view class="value-container">
      <view
        v-for="(item, index) in keyboardData"
        :key="index"
        class="container-item value-item"
        :style="valueStyle(index)"
        hover-class="keyboard-hover"
        :hover-stay-time="80"
        @tap.stop="handleValueClick(item)"
      >
        {{ item }}
      </view>
    </view>

    <!-- 操作区域 -->
    <view class="operation-container">
      <view
        class="container-item backspace"
        hover-class="keyboard-hover"
        :hover-stay-time="80"
        @touchstart.stop="handleBackspaceTouch"
        @touchend="clearBackspaceTimer"
      >
        <tn-icon icon="backspace-fill"></tn-icon>
      </view>
      <view
        class="container-item confirm"
        hover-class="keyboard-hover"
        :hover-stay-time="80"
        @tap.stop="handleConfirm"
      >
        确认
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { numberKeyboardProps, numberKeyboardEmits } from '../../../types/tn-keyboard'
import { computed, CSSProperties, ref } from 'vue'
import { getRandomArray } from '../../../utils'
import TnIcon from '../../tn-icon/src/Icon.vue'

const props = defineProps(numberKeyboardProps)
const emits = defineEmits(numberKeyboardEmits)

// 键盘内容
const keyboardData = computed<(string | number)[]>(() => {
  let data: (string | number)[] = [1,2,3,4,5,6,7,8,9,0]
  if (props.mode === 'number' && props?.dot) {
    
    data.push('.')
    // 判断是否打扰数组
    if (randomFlag.value && props?.random) data = getRandomArray(data)
  }
  else if (props.mode === 'card') data.push('X')

  return data
})

// 数值对应的样式
const valueStyle = computed<(index: number) => CSSProperties>(() => {
  return (index: number) => {
    let style: CSSProperties = {}
    if (keyboardData.value.length === 11 && index === 9) {
      style.width = '63%'
    } else if (keyboardData.value.length === 10 && index === 9) {
      style.width = '96%'
    }
    return style
  }
})

// 处理随机键盘数据
let randomFlag = ref<boolean>(false)
const resetRandom = () => {
  randomFlag.value = !randomFlag.value
}

// 处理退格键事件
let backspaceTouchTimer: number | null = null
const handleBackspaceTouch = () => {
  clearBackspaceTimer()
  emits('backspace')
  backspaceTouchTimer = setInterval(() => {
    emits('backspace')
  }, 250)
}
const clearBackspaceTimer = () => {
  if (backspaceTouchTimer !== null) {
    clearInterval(backspaceTouchTimer)
    backspaceTouchTimer = null
  }
}
// 处理确认事件
const handleConfirm = () => {
  emits('confirm')
}
// 处理数值点击事件
const handleValueClick = (value: string | number) => {
  emits('change', value)
}

defineExpose({
  resetRandom
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-number-keyboard {
  width: 100%;
  height: 440rpx;
  display: flex;
  flex-direction: row;
  padding: 14rpx;
  padding-top: 0rpx;
  font-weight: 500;
  font-size: 40rpx;

  .value-container {
    width: 75%;
    height: 100%;
    // background-color: aqua;
    margin-top: 6rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    .value-item {
      width: 30%;
    }
  }

  .operation-container {
    width: 25%;
    height: 100%;
    // background-color: aquamarine;
    margin-top: 6rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .backspace {
      width: calc(100% - 16rpx);
      font-size: 50rpx;
    }
    .confirm {
      flex: 1;
      width: calc(100% - 16rpx);
      background-color: $tn-main-color;
      color: #FFFFFF;
      height: 50%;
      font-size: 30rpx;
      &.keyboard-hover {
        opacity: 0.8;
      }
    }
  }

  .container-item {
    height: 21%;
    margin: 8rpx;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8rpx;
    overflow: hidden;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.02);
  }

  .keyboard-hover {
    background-color: #AAAAAA;
  }
}
</style>
